<template>
  <div style="height: 100%;overflow:auto;font-size: 14px;background-color: #f5f5f5;">
    <header>
      <div>
        <div class="header">
          <div class="user_content">
            <div class="logoContent show_logo_content">
              <a class="header_logo_goHome" @click="homePage">
                <img id="all_top_icon" src="../../../public/img/5d811034-b989-43a5-98cc-82df4bace7de.png" style="height:49px;margin-top:-6px;">
              </a>
              <p id="all_top_title" style="margin-left:12px">购物车</p>
            </div>
            <div class="userinfo login" style="display: block;">
              <a class="header_goHome" @click="homePage">
                <span class="toIndex">
                  返回首页
                </span>
              </a>
              <span v-if="userInfo && userInfo.id">|</span>
              <a v-if="userInfo && userInfo.id" class="header_goUser">
                <span class="username">{{userInfo.phone}}</span>
              </a>
              |
              <a class="header_order">
              <span class="order">
                我的订单
              </span>
              </a>|
              <span class="logout" v-if="userInfo && userInfo.id" @click="logoutFun">退出</span>
              <span class="logout" v-if="!userInfo || !userInfo.id" @click="loginPage">登录</span>
            </div>
          </div>
        </div>

      </div>
    </header>

    <div id="cart_pc_wrapper">

      <div class="main">
        <!-- 未登录提示 Start -->
        <div v-if="!userInfo || !userInfo.id" class="unlogin_wrapper">
          <span class="unlogin_icon">
            <i class="iconfont icon-prompt-fill"></i>
          </span>
          <span class="unlogin_text">您还没有登录！登录后购物车的商品将保存到您账户中</span>
          <button class="le_btn le_btn_solid le_button_login" @click="loginPage">立即登录</button>
        </div><!-- 未登录提示 End -->
        <!--购物车为空 Start-->
        <div class="cart_empty" tag="hasNoCount" style="display: none;">
          <dl class="clearfix">
            <dt class="fl">
              <img src="../../../public/img/nz4khhca89tqwb9x9bpa99zj6619c1027055.png">
            </dt>
            <dd class="fl">
              <ul>
                <li class="message">您的购物车空空如也，赶快选购吧～</li>
                <li class="btn_group">
                  <button class="le_btn le_btn_solid le_button_login" @click="loginPage">登录</button>
                  <button class="le_btn le_btn_border le_button_gohome" @click="homePage">去逛逛</button>
                </li>
              </ul>
            </dd>
          </dl>
        </div>
        <!--购物车为空 End-->
        <div class="cart_wrap">
          <div class="shipping-area-container clearfix" id="container_ShippingAddress">
            <div class="business-totalgoods">全部商品<span>{{totalNum}}</span>
            </div>
          </div><!-- 商品列表头部 Start -->
          <div class="clearfix cart_thead">
            <div class="le_width_116 t-checkbox selectAll">
              <el-checkbox v-model="allChecked" @change="selectAll">全选</el-checkbox>
            </div>
            <div class="t-goods">商品</div>
            <div class="le_width_172 t-price">单价</div>
            <div class="le_width_172 t-quantity">数量</div>
            <div class="le_width_172 t-sum">小计</div>
            <div class="le_width_116 t-action">操作</div>
          </div><!-- 商品列表头部 End -->
          <div class="good_list">
            <div v-for="(item,index) in cartList" :key="index" class="good_item testcls">
              <!-- Header -->
              <div class="good_item_head_box  active headerbox"></div>
              <div class="good_item_content">
                <div class="content_item active">
                  <div class="good_main">
                    <!-- 主品 -->
                    <div class="mainSku">
                      <!-- checkbox -->
                      <div class="clearfix form">
                        <div class="fl i_checkbox">
                          <el-checkbox v-model="item.checked" @change="selected(item)"></el-checkbox>
                        </div>
                        <div class="fl i_checkboxs">
                        </div>
                        <!-- img -->
                        <div class="fl i_img">
                          <a href="https://item.lenovo.com.cn/product/1029368.html" target="_blank">
                            <img class="mainsku_thumbnail_img" :src="item.cover" alt="">
                          </a>
                        </div>
                        <!-- MainSku desc -->
                        <div class="fl i_desc">
                          <h3 style="opacity:1;" @click="productDetail(item)">
                            <a class="goods_selltype">{{item.productName}}</a>
                          </h3>
                        </div>
                        <!-- 价格 -->
                        <div class="fl le_width_172 i_price">
                          <p style="opacity:1;visibility:visible;" class="le_paddingl_31">
                            <span>￥{{item.price}}</span>
                          </p>

                        </div>
                        <!-- 库存 -->
                        <div class="fl le_width_172 i_quantity" style="opacity:1;">
                          <p class="le_num_action">
                            <input type="button" value="-" class="reduce" @click="subNum(item)">
                            <input class="num" tag="mainsku_count" leblur="onBlurCount" v-model="item.num" type="text">
                            <input type="button" value="+" class="add" @click="addNum(item)">
                          </p>
                          <p class="le_color_red limit_tip"></p>
                        </div>
                        <!-- 小计 -->
                        <div class="fl le_width_172 i_sum">
                          <p style="opacity:1;visibility:visible;" class="le_paddingl_65">
                            <span>¥<span tag="mainsku_totalprice">{{item.price*item.num}}</span>
                            </span>
                          </p>
                        </div>
                        <!-- 操作 -->
                        <div class="fl le_width_116 i_action" style="visibility:visible">
                          <button>移入收藏夹</button>
                          <button @click="delCartSingle(index)" >删除</button>
                        </div>
                      </div>
                    </div>
                    <!-- 主品附属商品 -->
                    <div class="extra extraCls"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="cart_settlement_box" tag="hasCount" style="width: 1200px;">
          <div class="cart_settlement">
            <div class="settlement_box">
              <div class="fl action">
                <ul>
                  <li class="selectAll">
                    <el-checkbox v-model="allChecked" @change="selectAll">全选</el-checkbox>
                  </li>
                  <li>
                    <button id="deleteAllbtn" @click="delCartAll">删除</button>
                  </li>
                  <li>
                    <button id="deletefailurebtn">清空失效商品</button>
                  </li>
                  <li>
                    <button id="movetofavbtn">移入收藏夹</button>
                  </li>
                </ul>
              </div>
              <button class="fr settlement" id="gocheckout" @click="toPay">去结算</button>
              <div class="fr price_box">
                <div class="sum_box" style="line-height: 50px;">实付款：<span class="sum ptotalprefix">¥{{totalPrice.toFixed(2)}}</span>
                  <span class="le_color_red ptotalsuffix"></span>
                </div>
              </div>
              <div class="fr good_num">已选择<span class="le_color_red ptotalcount">{{totalNum}}</span>件</div>
            </div>
          </div>
        </div>

        <div id="cart_recommend_segment">
          <div class="_rcmd_container">
            <div class="clearfix _rcmd_title">
              <span class="_rcmd_decorate"></span>
              <span class="_rcmd_tip">为你推荐</span>
            </div>
            <div class="clearfix _rcmd_area">
              <div id="_rcmd_hot">
                <ul class="clearfix">
                  <li v-for="(item,index) in recommendList" :key="index" class="_rcmd_good" @click="productDetail(item)">
                    <div class="_rcmd_good_tumb_c">
                      <a>
                        <img :src="item.cover" class="_rcmd_good_tumb">
                      </a>
                    </div>
                    <span class="_rcmd_good_name">{{item.productName}}</span>
                    <span class="_rcmd_good_price">￥{{item.price}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { removeToken } from '@/utils/auth';
  import data from '@/data/data.js';
  export default {
    data() {
      return {
        allChecked: true,//全部选中
        totalNum: 0,
        totalPrice: 0,
        cartList:[
          {
            id:6,productName:'联想小新Pro14 2023英特尔酷睿i5 14英寸轻薄笔记本电脑 鸽子灰',
            des:'第13代智能英特尔® 酷睿™ i5-13500H/Windows 11 家庭中文版/14英寸/32GB/1T SSD/集成显卡/鸽子灰',
            price: 6299,
            checked: true,
            num: 1,
            cover:require('../../../public/img/knUF2BaGGRQat2RbPBEJYzXN4-5579.jpg'),
            imgList:[
              require('../../../public/img/XTvcWaCf29MTC2SFOSW2fV9RS-2939.jpg'),
              require('../../../public/img/QAzTExsVTx3ialBVZtALls8U4-5557.jpg'),
              require('../../../public/img/knUF2BaGGRQat2RbPBEJYzXN4-5579.jpg'),
              require('../../../public/img/W6d3BDNuaVr9PW6hu34Jz7Gfy-6568.jpg'),
              require('../../../public/img/p7dRyKcQlgtRXg3vSfvMxoh8q-9424.jpg'),
              require('../../../public/img/Q988RRMJGvzXsS4Yl0xMtfdu7-9453.jpg'),
              require('../../../public/img/f2nKZzx1OMaFiXiHYIlPjQDld-9470.jpg'),
              require('../../../public/img/SrRWO60htt9FKBXwXB2KyTaGP-9681.jpg')
            ],
            detailImgList:[//详情图片列表
              require('../../../public/img/CzI5QGjkRxyFtloNvI3kOZNiP-8477.jpg'),
              require('../../../public/img/F7pAbFtMSzEQWeOqPnnFKXbZT-3974.jpg'),
              require('../../../public/img/j9Kp8c4wTLFmHAprl6x4t55XE-9849.jpg'),
              require('../../../public/img/ByIoqf3sDqjdLpD4HOiAoCCXz-5940.jpg'),
              require('../../../public/img/n3XxKFBREGM85FD14tcKfCPXL-6896.jpg')
            ]
          },
          {
            id:7,productName:'联想小新Pro16超能本2023酷睿版 16英寸轻薄笔记本电脑 鸽子灰',
            des:'第13代智能英特尔® 酷睿™ i5-13500H/Windows 11 家庭中文版/16英寸/32GB/1T SSD/RTX 4050 6G 独显/鸽子灰',
            price: 8999,
            checked: true,
            num: 1,
            cover:require('../../../public/img/L1Fknd8OIlpPBJU7ymLhFyyg3-5615.jpg'),
            imgList:[
              require('../../../public/img/L1Fknd8OIlpPBJU7ymLhFyyg3-5615.jpg'),
              require('../../../public/img/PC2kZhfwGz83JkNLGZa6qbqDf-5601.jpg'),
              require('../../../public/img/Ad8qaOw061UhoGbIFnMPesI93-2219.jpg'),
              require('../../../public/img/sYA3doEFvG64YITTiQf26ymJa-2182.jpg'),
              require('../../../public/img/W3ag4Bha8iSqcjdF4rNgTTQdA-2211.jpg')
            ],
            detailImgList:[//详情图片列表
              require('../../../public/img/CzI5QGjkRxyFtloNvI3kOZNiP-8477.jpg'),
              require('../../../public/img/F7pAbFtMSzEQWeOqPnnFKXbZT-3974.jpg'),
              require('../../../public/img/j9Kp8c4wTLFmHAprl6x4t55XE-9849.jpg'),
              require('../../../public/img/ByIoqf3sDqjdLpD4HOiAoCCXz-5940.jpg'),
              require('../../../public/img/n3XxKFBREGM85FD14tcKfCPXL-6896.jpg')
            ]
          },
        ],
        recommendList: []
      };
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    mounted() {
      this.initCart();
      data.products.forEach((item) => {
        if(this.recommendList.length < 4){
          this.recommendList.push(item);
        }
      })

    },
    methods: {
      homePage(){//首页
        this.$router.push({path:'/'});
      },
      loginPage(){//登录注册
        this.$router.push({path:'/login'});
      },
      //初始化购物车
      initCart(){
        this.total();
      },
      //统计
      total() {
        this.totalNum = 0;
        this.totalPrice = 0
        this.cartList.forEach((item) => {
          item.checked ? (this.totalNum += item.num) : (this.totalNum += 0)
          item.checked ? (this.totalPrice += item.num * item.price) : (this.totalPrice += 0);
        })
      },
      //缓存购物车
      saveCarToStorage(){
        this.total();
      },
      //删除购物车商品 - 单个
      delCartSingle(index){
        this.$confirm('确定删除?', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          if(this.cartList.length > index){
            //删除
            this.cartList.splice(index,1);
            this.saveCarToStorage();
            this.$message.success('删除成功');
          }
        });
      },
      //删除购物车商品 - 全部
      delCartAll(){
        this.$confirm('确定删除选中的商品?', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          this.cartList.forEach((item,index) => {
            if(item.checked){
              this.cartList.splice(index,1);
            }
          })
          this.$message.success('删除成功');
          this.initCart();
        });
      },
      //商品详情
      productDetail(item) {
        console.info(item);
        this.$router.push({
          path:'/productDetail',
          query:{
            id: item.id
          }
        })
      },
      //勾选商品
      selected(item){
        if (!item.checked) {
          this.allChecked = false;
        } else {
          let allChecked = true;
          this.cartList.forEach((item) => {
            if(!item.checked){
              allChecked = false;
            }
          })
          this.allChecked = allChecked;
        }
        this.total();
      },
      //全选
      selectAll(){
        if (this.allChecked) {
          this.cartList.map((item) => {
            this.checked = true;
            item.checked = true;
          })
        } else {
          this.checked = false;
          this.cartList.map((item) => {
            item.checked = false;
          })
        }
        this.total();
      },
      //商品数量减
      subNum(item){
        let num=item.num;
        if(num>1){
          num-=1
        }
        item.num=num;
        //存到缓存
        this.saveCarToStorage();
      },
      //商品数量加
      addNum(item){
        let num =item.num;
        item.num=num+1;
        //存到缓存
        this.saveCarToStorage();
      },
      //结算
      toPay() {
        let value = '';
        this.cartList.forEach((item) => {
          if(item.checked){
            if(value !== ''){
              value += '*';
            }
            value += item.id + '_' + item.num;
          }
        });
        this.$router.push({
          path:'/pay',
          query:{
            value: value
          }
        })
      },
      logoutFun(){//退出登录
        this.$confirm("确定退出登录?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$notify({
              title: '提示',
              message: '退出成功',
              type: 'success'
              //duration: 0//为0则不会自动关闭
            });
            //清除用户信息缓存
            localStorage.removeItem("userInfo");
            this.$store.commit('SET_USER_INFO', {});
            removeToken();
            this.$router.push({path: '/login'});
          })
      }
    }
  };
</script>
<style scoped>
  .header {
    margin: 0 auto;
    padding-top: 0px;
    background: #f9f9f9;
    height: 50px;
    line-height: 48px;
    border-bottom: solid 1px #d2d2d2;
  }
  .user_content {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
  }
  .logoContent {
    float: left;
    vertical-align: top;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  a {
    text-indent: 0px;
    cursor: pointer;
  }
  .logoContent p, .logoContent img {
    display: inline-block;
  }
  .logoContent img {
    vertical-align: middle;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
  img, fieldset, input {
    border: 0;
    outline: transparent;
  }
  .logoContent p, .logoContent img {
    display: inline-block;
  }
  .logoContent p {
    font-size: 20px;
    line-height: 48px;
  }
  ul, li, p {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .userinfo {
    float: right;
  }
  .userinfo span {
    padding: 0 5px;
    cursor: pointer;
  }

  #cart_pc_wrapper {
  }
  #cart_pc_wrapper {
    min-height: 85%;
  }
  #cart_pc_wrapper .main {
    width: 1200px;
    margin: 15px auto;
  }
  #cart_pc_wrapper .unlogin_wrapper {
    background: #FFF4F3;
    border-radius: 2px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #FF2F2F;
    margin-bottom: 10px;
  }
  #cart_pc_wrapper .unlogin_wrapper .unlogin_icon {
    margin-left: 34px;
    vertical-align: middle;
  }
  #cart_pc_wrapper .unlogin_wrapper .unlogin_icon i {
    font-size: 18px;
    color: #FF4948;
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
  }
  #cart_pc_wrapper .unlogin_wrapper .unlogin_text {
    margin-left: 4px;
    margin-right: 10px;
  }
  #cart_pc_wrapper .unlogin_wrapper button {
    width: 78px;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
  }
  .le_btn_solid {
    color: #ffffff;
    background: #E1140A;
  }
  .le_btn {
    border-radius: 4px;
    cursor: pointer;
  }
  button, input, select, textarea {
    border-style: none;
  }
  button {
    outline: transparent;
    border: 0;
  }
  html, body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, select, textarea, button, th, td {
    margin: 0;
    padding: 0;
  }
  #cart_pc_wrapper .cart_empty dl {
    padding: 132px 0 121px 345px;
  }
  .clearfix {
    zoom: 1;
  }
  ul, dl, ol, li {
    list-style: none;
  }
  .fl {
    float: left;
  }
  #cart_pc_wrapper .cart_empty dl dt img {
    width: 150px;
    height: 100px;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
  #cart_pc_wrapper .cart_empty dl dd {
    padding-top: 22px;
  }
  ul, li, p {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #cart_pc_wrapper .cart_empty dl dd .message {
    font-size: 20px;
    color: #454545;
  }
  #cart_pc_wrapper .cart_empty dl dd .btn_group {
    margin-top: 8px;
  }
  #cart_pc_wrapper .cart_empty dl dd .btn_group .le_btn_solid {
    height: 36px;
    line-height: 36px;
    border: 1px #E1140A solid;
  }

  .le_btn_solid {
    color: #ffffff;
    background: #E1140A;
  }
  .le_btn {
    width: 100px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
  }
  .le_btn_border {
    border: 1px solid #E1140A;
    color: #E1140A;
    height: 36px;
    line-height: 36px;
  }
  #container_ShippingAddress {
    position: relative;
  }
  .shipping-area-container {
    margin: 0;
    padding-left: 35px;
    height: 37px;
    color: #434242;
  }
  .clearfix:before, .clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .shipping-area-container .business-totalgoods {
    font-size: 14px;
    font-weight: 600;
    color: #ef1e0b;
    width: 150px;
    float: left;
    line-height: 30px;
  }
  #cart_pc_wrapper .cart_wrap .cart_thead {
    padding-right: 35px;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    text-align: center;
    background: #FFFFFF;
    border-radius: 4px;
    font-weight: bold;
  }
  #cart_pc_wrapper .cart_wrap .cart_thead .t-checkbox {
    text-align: left;
    text-indent: 10px;
  }
  #cart_pc_wrapper .cart_wrap .cart_thead > div {
    float: left;
  }
  .le_width_116 {
    width: 116px;
  }
  #cart_pc_wrapper .cart_wrap .cart_thead .t-goods {
    width: 417px;
  }
  #cart_pc_wrapper .cart_wrap .cart_thead > div {
    float: left;
  }
  #cart_pc_wrapper .cart_wrap .cart_thead .t-price {
    text-align: left!important;
    text-indent: 31px;
  }
  #cart_pc_wrapper .cart_wrap .cart_thead > div {
    float: left;
  }
  .le_width_172 {
    width: 172px;
  }
  .le_width_116 {
    width: 116px;
  }
  #cart_pc_wrapper .cart_wrap .good_list .good_item {
    background: #FFFFFF;
    border-radius: 4px;
    margin-top: 6px;
  }
  #cart_pc_wrapper .cart_wrap .good_list .good_item .good_item_head_box.active {
    background: #FFF8F4;
  }
  #cart_pc_wrapper .cart_wrap .good_list .good_item .good_item_head_box {
    padding: 0 35px;
  }
  #cart_pc_wrapper .content_item {
    text-align: left;
  }
  #cart_pc_wrapper .content_item.active .good_main {
    background: #FFF8F4;
  }
  #cart_pc_wrapper .content_item .good_main {
    padding: 23px 35px 17px 35px;
  }
  #cart_pc_wrapper .i_checkbox {
    width: 16px;
    height: 16px;
    margin: 44px 12px 0 0;
  }
  #cart_pc_wrapper .i_img {
    position: relative;
  }
  #cart_pc_wrapper .i_img img {
    width: 110px;
    height: 110px;
    vertical-align: middle;
  }
  #cart_pc_wrapper .i_desc {
    width: 346px;
    text-align: left;
    padding-left: 14px;
  }
  #cart_pc_wrapper .i_desc h3 {
    font-size: 14px;
  }
  #cart_pc_wrapper .i_desc h3 a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  #cart_pc_wrapper .content_item .good_main .i_price {
    font-size: 14px;
  }
  .le_paddingl_31 {
    padding-left: 31px;
  }
  #cart_pc_wrapper .i_quantity {
    text-align: center;
  }
  .le_num_action {
    display: inline-block;
    border: 1px solid #E0E0E0;
    background-color: #ffffff;
  }
  ul, li, p {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .le_num_action input[type='button'] {
  }

  .le_num_action input:disabled {
    color: #E0E0E0;
    opacity: 1;
    -webkit-text-fill-color: #E0E0E0;
  }
  .le_num_action .reduce {
    border-right: 1px solid #E0E0E0;
  }
  .le_num_action .reduce, .le_num_action .add {
    width: 27px;
    cursor: pointer;
    font-size: 18px;
  }
  .le_num_action input {
    display: inline-block;
    text-align: center;
    height: 27px;
  }
  .le_num_action .num {
    width: 48px;
  }
  .le_num_action input {
    display: inline-block;
    text-align: center;
    color: #454545;
    height: 27px;
  }
  .le_num_action .add {
    border-left: 1px solid #E0E0E0;
  }
  button, input, select, textarea {
    background-color: transparent;
    border-style: none;
  }
  #cart_pc_wrapper .content_item .good_main .i_sum {
    font-size: 14px;
    font-weight: bold;
  }
  .le_paddingl_65 {
    padding-left: 65px;
  }
  .le_width_116 {
    width: 116px;
  }
  #cart_pc_wrapper .i_action button {
    display: block;
    margin-left: 26px;
    cursor: pointer;
    font-size: 13px;
    color: #454545;
  }
  #cart_pc_wrapper .i_desc h3 a:hover {
    color: #E1140A;
  }
  #cart_pc_wrapper .i_action button:hover {
    color: #E1140A;
  }
  #cart_pc_wrapper .cart_settlement_box {
    height: 60px;
    margin: 0 auto;
    margin-bottom: 30px;
  }
  #cart_pc_wrapper .cart_settlement {
    height: 60px;
    background: #ffffff;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box {
    width: 1200px;
    margin: 0 auto;
    text-align: right;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box .action {
    line-height: 60px;
    padding-left: 36px;
    font-size: 14px;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box .action li.selectAll {
    cursor: pointer;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box .action li {
    float: left;
    margin-right: 30px;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box .action li.selectAll i {
    margin-right: 25px;
    display: inline-block;
    margin-top: -2px;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box .action li {
    float: left;
    margin-right: 30px;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box .action li button {
    font-size: 14px;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box .action button {
    cursor: pointer;
  }
  button, input, select, textarea {
    background-color: transparent;
    border-style: none;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box button.settlement {
    background: #E1140A;
    width: 195px;
    height: 60px;
    line-height: 60px;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box .price_box {
    padding: 7px 15px 0 61px;
    font-size: 12px;
    text-align: left;
  }
  #cart_pc_wrapper .cart_settlement .price_box .sum_box span.sum {
    font-size: 22px;
    color: #E1140A;
    padding-left: 6px;
    font-weight: bold;
  }
  #cart_pc_wrapper .cart_settlement .price_box .sum {
    line-height: 28px;
  }
  #cart_pc_wrapper .cart_settlement .price_box .sum_box .ptotalsuffix {
    font-weight: bold;
  }
  .le_color_red {
    color: #E1140A;
  }
  #cart_pc_wrapper .cart_settlement .settlement_box .good_num {
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    border-right: 1px solid #E0E0E0;
    padding-right: 24px;
    font-size: 14px;
  }
  .le_color_red.ptotalcount {
    font-weight: bold;
    margin: 0 4px;
  }
  .le_color_red {
    color: #E1140A;
  }
  .fr {
    float: right;
  }

  #cart_pc_wrapper #cart_recommend_segment {
    width: 100%;
    margin-bottom: 14px;
  }
  #cart_pc_wrapper #cart_recommend_segment div._rcmd_container {
    background-color: #ffffff;
    border-radius: 4px;
    margin: auto;
    width: 1200px;
    display: block;
    position: relative;
  }
  #cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_title {
    font-size: 22px;
    line-height: 22px;
    width: 100%;
    padding-top: 28px;
  }
  #cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_title span._rcmd_decorate {
    margin: 9px 8px 0px 28px;
    display: block;
    float: left;
    background: #FF2F2F;
    border-radius: 2px;
    width: 3px;
    height: 22px;
  }
  #cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_title span._rcmd_tip {
    display: block;
    float: left;
    margin: 8px 0px 0px 0px;
    font-weight: 600;
  }
  #cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_area {
    width: 100%;
    background-color: #ffffff;
  }
  #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot {
    width: 90%;
    height: fit-content;
    margin: 0 auto;
  }
  #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot li._rcmd_good {
    width: 25%;
    height: 100%;
    float: left;
    padding-bottom: 44px;
  }
  #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot div._rcmd_good_tumb_c {
    padding: 15px;
  }
  #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot div._rcmd_good_tumb_c a {
    display: inline-block;
  }
  #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot img._rcmd_good_tumb {
    width: 100%;
    height: 100%;
  }
  #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span._rcmd_good_name {
    height: 40px;
    color: rgb(15, 15, 15);
    font-weight: 500;
    font-size: 13px;
    font-family: 微软雅黑;
    text-overflow: ellipsis;
    margin-bottom: 5px;
    line-height: 20px;
    padding: 0px 15px;
  }
  #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span {
    display: block;
    overflow: hidden;
  }
  #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span._rcmd_good_price {
    color: red;
    font-size: 14px;
    padding: 0px 15px 0px 15px;
  }
  #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span {
    display: block;
    overflow: hidden;
    font-weight: 600;
  }
  #cart_pc_wrapper #cart_recommend_segment ._dsp_off {
    display: none;
  }
</style>
